<template>
  <div class="anchor_view">
    <img
      src="/img/anchor/nav_background.png"
      alt="img"
      class="nav_background"
    />
    <nav>
      <div class="img">
        <van-image width="60" height="60" :src="img" />
      </div>
      <div class="font">
        <h1>{{ name }}</h1>
        <p>{{ num }}W粉丝</p>
        <p>{{ character }}</p>
      </div>
      <button @click="attentionChange(index)">
        {{ attention ? "未关注" : "已关注" }}
      </button>
    </nav>
    <main>
      <div class="classify_box">
        <ul class="classify">
          <li :class="{ con: classifyStyle == 0 }" @click="classifyChange(0)">
            最新
          </li>
          <li :class="{ con: classifyStyle == 1 }" @click="classifyChange(1)">
            热销
          </li>
          <li :class="{ con: classifyStyle == 2 }" @click="classifyChangePrice">
            价格
          </li>
          <li :class="{ con: classifyStyle == 3 }" @click="commodityTypeIs">
            分类
          </li>
        </ul>
        <ul class="classification" v-if="commodityShowHide">
          <li
            :class="{ con: commodityChange == index }"
            v-for="(item, index) in commodityTypeData"
            :key="index"
            @click="commodityTypeChange(index)"
          >
            {{ item.tagName }}
          </li>
        </ul>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="commodity">
          <li v-for="(item, index) in list" :key="index">
            <div class="img">
              <van-image width="158" height="210" :src="item?.cover" />
              <div class="recently">{{ item?.tagTime }}</div>
              <div class="player">
                <van-image
                  width="43"
                  height="43"
                  src="/img/anchor/player.png"
                />
              </div>
            </div>
            <div class="font">
              <h1 class="font_h1">{{ item?.title }}</h1>
              <p class="font_p">
                <span class="money">￥</span>
                {{ item?.discountPrice }}
                <span class="original">￥{{ item?.price }}</span>
              </p>
            </div>
          </li>
        </ul>
      </van-list>
    </main>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { anchorCommodityType, anchorproductData } from "../../api/anchor";
// import { tabulationAPI } from "../../api/home";

export default {
  data() {
    return {
      // 分类样式变化
      classifyStyle: 0,
      classify: 0,
      //商品类型样式变化
      commodityChange: 0,
      //商品类型消失隐藏
      commodityShowHide: false,
      //vant上拉加载
      list: [],
      loading: false,
      finished: false,
      //商品类型数据
      commodityTypeData: [],
      //商品数据
      productData: [],
      tagName: "",
    };
  },

  mounted() {
    this.getCommodityTypeData();
    setTimeout(() => {
      this.commodityTypeChange(0);
      this.getProductData();
    }, 2000);
  },

  methods: {
    ...mapMutations(["attentionChange"]),
    //点击选择商品类型消失隐藏
    commodityTypeIs() {
      this.classifyStyle = 3;
      this.commodityShowHide = !this.commodityShowHide;
    },
    //vant上拉加载
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.finished = false;
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.productData[i]);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.productData.length) {
          this.finished = true;
        }
      }, 2000);
    },
    //商品类型数据
    async getCommodityTypeData() {
      let url = anchorCommodityType(this.$route.params.actorIdUrl);
      let { data } = await this.$axios.get(url);
      console.log(3,data);
      console.log(4,url);
      this.commodityTypeData = data.data;
    },
    //商品数据
    async getProductData() {
      let url = anchorproductData(
        this.$route.params.actorIdUrl,
        this.classify,
        this.tagName
      );
      console.log(2,url);
      let { data } = await this.$axios.get(url);
      console.log(1,data);
      this.productData = data.data.itemList;
    },
    //商品类型样式变化
    commodityTypeChange(i) {
      this.commodityChange = i;
      this.tagName = this.commodityTypeData[i].tagName;
      this.getProductData();
      this.list = [];
      this.finished = false;
    },
    //分类
    classifyChange(i) {
      this.classifyStyle = i;
      this.classify = i;
      this.getProductData();
      this.list = [];
      this.finished = false;
    },
    // 分类价格
    classifyChangePrice() {
      if (this.classify != 2 && this.classify != 3) {
        this.classify = 2;
      } else if (this.classify == 2) {
        this.classify = 3;
      } else if (this.classify == 3) {
        this.classify = 2;
      }
      this.classifyStyle = 2;
      this.getProductData();
      this.list = [];
      this.finished = false;
    },
  },
  computed: {
    ...mapState(["date"]),
    //关注
    attention() {
      return this.date[this.$route.params.index].follow;
    },
    index() {
      return this.$route.params.index;
    },
    //头像
    img() {
      return this.$route.params.img;
    },
    //昵称
    name() {
      return this.$route.params.name;
    },
    //粉丝量
    num() {
      return this.$route.params.num;
    },
    //个性签名
    character() {
      return this.$route.params.character;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.anchor_view {
  position: relative;
  .nav_background {
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    height: 216px;
  }
}
nav {
  display: flex;
  align-items: center;
  padding: 15px;
  .img {
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    z-index: 10;
    margin-right: 12px;
  }
  .font {
    width: 50.4%;
    z-index: 10;
    color: #fff;
    h1 {
      font-size: 18px;
      font-weight: normal;
      padding: 4px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      font-size: 14px;
      padding: 4px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  button {
    width: 66px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background-color: #fff;
    color: #ff4466;
    z-index: 10;
    font-size: 12px;
  }
}
main {
  position: relative;
  margin: 0 12px;
  padding-top: 10px;
  background-color: #fff;
  border-radius: 3px;
  .classify_box {
    position: relative;
  }
  .classify {
    z-index: 999;
    display: flex;
    width: 57%;
    justify-content: space-between;
    background-color: #fff;
    margin-left: 15px;
    li {
      z-index: 10;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #666;
      position: relative;
      &.con {
        color: #ff4466;
      }
      &:nth-of-type(3)::before {
        position: absolute;
        content: "";
        width: 4px;
        height: 8px;
        background: url("/public/img/anchor/priceOrder.png");
        background-size: cover;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
      }
      &:nth-of-type(4)::before {
        position: absolute;
        content: "";
        width: 5px;
        height: 4px;
        background: url("/public/img/anchor/classify.png");
        background-size: cover;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .classification {
    padding: 5px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: 999;
    li {
      width: 75px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 12px;
      color: #333;
      margin: 5px;
      border-radius: 3px;
      background-color: #f5f5f5;
      &.con {
        color: #ff4466;
      }
    }
  }
  .commodity {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    li {
      width: 47.7%;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid #e7e7e7;
      margin-bottom: 10px;
    }
    .img {
      position: relative;
    }
    .recently {
      position: absolute;
      width: 56px;
      height: 17px;
      top: 10px;
      left: 0;
      font-size: 12px;
      color: #fff;
      background-color: #f04865;
      border-top-right-radius: 999px;
      border-bottom-right-radius: 999px;
    }
    .player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .font {
      padding: 12px 9px;
    }
    .font_h1 {
      font-size: 14px;
      color: #333;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
      font-weight: normal;
      text-indent: 4px;
    }
    .font_p {
      margin-top: 9px;
      color: #333;
      font-size: 14px;
      display: flex;
      align-items: flex-end;
      font-weight: 700;
    }
    .money {
      font-size: 12px;
    }
    .original {
      font-size: 12px;
      font-weight: normal;
      color: #ababab;
      display: inline-block;
      margin-left: 4px;
      text-decoration: line-through;
    }
  }
}
</style>